<script lang="ts" setup>
import { getHealthSX } from '~/api/home'
const selectValue= ref<string>('全部')
const options = ref<{ value: string, label: string }[]>([
  { value: '全部', label: '全部' },
  { value: '西安地情', label: '西安地情' },
  { value: '书籍展示', label: '书籍展示' },
  { value: '新闻中心', label: '新闻中心' },
  { value: '政策解读', label: '政策解读' },
  { value: '机构信息', label: '机构信息' },
])
const props = defineProps({
  type: {
    type: [Array, String],
    default: () => [],
  },
  isFF: {
    type: Boolean,
    default: false,
  },
})
const inputVal = ref('')
const loading = ref(true)
const list = ref<any[]>([])
const searchValue = ref('')
const hotSearch = ref<any[]>([
  "西安人文",
  "国家方志",
  "文人风采",
  "西安旅游",
  "西安美食",
])
// 搜索
function onSearch() {
  searchValue.value = inputVal.value
  // getList()
  console.log(window.location.pathname)
  navigateTo({
    path: `/peopleHealth/advancedSearch`,
    query: {
      data: searchValue.value,
      type: props.type,
    },
  })
}
function clearInput() {
  inputVal.value = ''
}
function getHealthSxList() {
  getHealthSX().then((res) => {
    loading.value = false
    list.value = res.data
  }).catch(() => {
    loading.value = false
  })
}
function hotSearchClick(item: any) {
  inputVal.value = item
  navigateTo({
    path: `/peopleHealth/advancedSearch`,
    query: {
      data: inputVal.value,
      type: props.type,
    },
  })
}

const search = useSearch()
const showSearch = ()=>{
    search.value=!search.value
}
getHealthSxList()
</script>

<template>
  <div class="mx-auto" :class="{ 'w-1200px': props.type === '全部', 'w-900px': props.type !== '全部' }">
    <!-- <div v-if="props.type !== '全部'" class="mx-auto pt-34px text-18px text-white">
      <span>主办单位：陕西省卫生健康委员会
      </span>
      <span class="ml-50px">承办单位：陕西省健康教育中心</span>
    </div> -->
    
    <div class="py-18px">
      <div class="relative flex items-center">
        <div class="right h-70px flex flex-1 items-center bg-#fff py-5px border-2px border-color-#d5ac39 rounded-10px">
          <el-select v-if="$route.path=='/'" v-model="selectValue" placeholder="Select" size="large" class="select-box ">
             <el-option
              v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <input v-model="inputVal" placeholder="请输入搜索信息" class="min-w-0 flex-1 indent-16px outline-none">
          <div class="h-auto p-l-20px p-y-5px m-r-20px border-l-1 border-color-#d5ac39 cursor-pointer">
          <img src="/img/home_search.png" alt="" class="w-25px h-25px" @click="onSearch">
          </div>
          <div>

          </div>
        </div>
        <span class="w-3"></span>
        <div class="mr-10px h-70px w-160px flex cursor-pointer items-center justify-center text-20px text-#FFF rounded-10px"
          style="background: linear-gradient(159.97deg, #d3c292 -140.78%,#d5ac39 89.45%);"
          @click="showSearch">
          <!-- <i class="i-ri:search-line cursor-pointer text-#fff w-25px h-25px" /> -->
          高级搜索
        </div>
      </div>
      <div v-if="props.type === '全部'" class="mt-50px w-full flex items-center" :style="isFF ? '' : 'color:#fff'">
        <div class="text-16px text-#d5ac39 font-700">
          热门搜索：
        </div>
        <span v-for="item in hotSearch" class="ml-50px cursor-pointer" hover="text-#d5ac39"
          @click="hotSearchClick(item)">{{ item }}</span>
      </div>  
    </div>
  </div>
</template>

<style scoped lang="scss">
.select-box {
  width: 150px;
  height: 100%;
}
.select-box:deep(.el-select__wrapper){
  height: 100%;
  box-shadow: none;
}
.select-box:deep(.el-select__placeholder){
  color: #d5ac39;
  font-size: 1rem;
  text-align: center 
}
.select-box:deep(.el-select__caret){
  color: #d5ac39;
}
.select-box:deep(.el-select-dropdown__item.is-selected){
  color: #d5ac39;
}
.is-selected{
  color: #d5ac39;
}
</style>
